<template>
    <div class="petconsult">
        <div class="header">
            <h1 id="know">宠物市场</h1>
            <div id="search">
                <input class="user-input" type="text" name="search" placeholder="请输入内容" v-model="input" @change="search">
        <input class="user-btn" type="button" value="搜索">
            </div>
        </div>
        <div class="float-button">
            <a href="javascript:window.scrollTo(0,0)">UP</a>
        </div>
        <div class="message">
            <div class="content">
                <div class="leftimg">
                    <img src="../assets/images/1/c1.jpg">
                </div>
                <div class="front">
                    <p class="written">  英短银渐层市场价格多少钱？相信这个问题是很多养猫家长比较关心的问题之一，
                        英短银渐层猫咪虽然不像布偶猫那么有知名度，
                        但深受家长们的喜爱英国短银渐层猫咪究竟多少钱？</p>
                    <div class="link">
                    <router-link  to="/Consultpet" class="more">know more about</router-link>
                    </div>
                </div>
                <div class="rightimg">
                    <img src="../assets/images/1/c6.jpg">
                </div>
            </div>
            <div class="content">
                <div class="leftimg">
                    <img src="../assets/images/1/a4.jpg">
                </div>
                <div class="front">
                    <p class="written">宠物行业存在品类多、变化快的特点，为满足客户对众多宠物产品推陈出新的更新变化需求，企业需要及时了解行业市场需求变动情况，
                        并不断开发出紧跟市场变化的产品，以获得市场认可。</p>
                    <div class="link">
                    <router-link  to="/Consultpet" class="more">know more about</router-link>
                    </div>
                </div>
                <div class="rightimg">
                    <img src="../assets/images/1/c7.jpg">
                </div>
            </div>
            <div class="content">
                <div class="leftimg">
                    <img src="../assets/images/1/c4.jpg">
                </div>
                <div class="front">
                    <p class="written">当前，国内外宠物市场仍处于较为分散的竞争格局。随着国民生活水平的提高，宠物行业前景被市场普遍看好，较多国内外企业开始进入宠物行业。宠物行业进入门槛相对较低，
                        综合国内外市场情况，未来企业可能将面临较为激烈的市场竞争。</p>
                    <div class="link">
                    <router-link  to="/Consultpet" class="more">know more about</router-link>
                    </div>
                </div>
                <div class="rightimg">
                    <img src="../assets/images/1/c8.jpg">
                </div>
            </div>
            <div class="content">
                <div class="leftimg">
                    <img src="../assets/images/1/c9.jpg">
                </div>
                <div class="front">
                    <p class="written"> 德文卷毛猫的是众多宠物猫当中比较的热门的宠物猫之一，那么问题来了德文卷毛猫的价格都是不一样的，
                        那么到底是那种毛色的德文卷毛猫的价格更贵呢？</p>
                    <div class="link">
                    <router-link  to="/Consultpet" class="more">know more about</router-link>
                    </div>
                </div>
                <div class="rightimg">
                    <img src="../assets/images/1/c10.jpg">
                </div>
            </div>
        </div>



    </div>
</template>

<script>
    import axios from "axios"
     export default {
             
         // data(){
         //     return{
         //     kid:[],
         //     know:[],
         //     title:[]
         //     }
         // },
         // method() {
         //     axios.get("http://localhost:3000/api/knowofpet")
         //     .then(res=>{
         //         this.know=res.data();
         //         console.log(this.know);
         //     })
         // }
         data() {
             return {
                 input: '',
                 index: 0,
                 info: []
             }
         },
         mounted() {
             var _this = this;
             axios.get("http://localhost:3000/api/petconsult")
                 .then(res => {
                     console.log("获取数据成功");
                     console.log(res);
                     _this.info = res.data;
                     console.log(_this.info)
 
                 })
                 .catch(err => {
                     console.log('获取数据失败' + err);
                 })
 
         },
         methods: {
             search() {
                 let _this = this;
                 if (_this.input == '') {
                     console.log('搜索空字符');
                     _this.$router.go(0);
                 }
                 else {
 
                     console.log('搜索' + _this.input);
                     let a = _this.info.filter(v => {
                         return JSON.stringify(v.Contitle).indexOf(_this.input) !== -1;
                     });
                     _this.$router.push('/Consultpet');
                     console.log(a);
                     _this.info = a;
                 }
             }
 
         }
     }
 </script>

<style scoped>
    .petconsult {
        min-width: 100%;
        display: flex;
    /* height: 2000px; */
    /* width: 100%; */
    /* border: solid black 3px; */
    flex-direction: column;
    }

    .user-input {
        width: 90%;
        height: 100%;
        border: 2px solid rgba(246, 255, 0, 0.86);
        border-radius: 5px;
        box-sizing: border-box;
        outline: none;
        text-indent: 10%;
        font-size: 150%;
        font-family: 楷体;
    }

    .user-btn {
        width: 60%;
        height: 90%;
        border: none;
        border-radius: 5px;
        background: rgba(251, 255, 0, 0.874);
        vertical-align: middle;
        outline: none;
        color: white;
        font-size:160%;
        font-family: 楷体;
    }

    #search {
        display: flex;
        float: right;
        margin-top: 1%;
    }

    #know {

        display: flex;
        float: left;
        margin-top: 1%;
       margin-left: 3%;
        font-family: 楷体;
        color: rgb(197, 197, 16);
    }

    .float-button {
        position: fixed;
        /* height: 10%; */
        width: 5%;
        bottom: 0px;
        right: 0px;
        border-radius: 50px;
        line-height: 450%;
        text-align: center;
        background: #f7f31045;
        z-index: 1;
    }
    a {
    text-decoration: none;
  }

  a:hover {
    text-decoration: none;
  }
    .message {
        display: flex;
        /* height: 1600px; */
        width: 100%;
        /* border: solid black 3px; */
        flex-direction: column;
        margin-top: 25px;
    }

    .content {
        display: flex;
        height: 400px;
        /* width: 100%; */
        border: dashed yellow 3px;
        justify-content: center;
        align-items: center;
        margin-bottom: 5%;
        border-radius: 40px;
        margin-left: 5%;
        margin-right: 5%;
        background-color: rgba(255, 255, 0, 0.112);
    }
    .content:hover {
    box-shadow: 0px 0px 20px #888888;
  }
    .leftimg {
        display: flex;
        float: left;
        border-radius: 40px;
        overflow: hidden;
        height: 250px;
        margin-top: 40px;
        /* border: solid rgb(10, 235, 81) 3px; */
        /* -webkit-animation: fadeinout 5s linear forwards; */
        /* 停留在动画最后 */
        animation: fadeinout 5s linear forwards;
    }

    .rightimg {
        display: flex;
        float: right;
        height: 250px;
        margin-top: 40px;
        border-radius: 50px;
        overflow: hidden;
        /* border: solid rgb(246, 9, 9) 3px; */
        /* -webkit-animation: fadeinout 5s linear forwards; */
        animation: fadeinout 5s linear forwards;
    }

    .front {
        display: flex;
        margin-top: 40px;
        height: 70%;
        line-height: 40px;
        width: 500px;
        margin: 10px;
        border: dashed rgba(255, 255, 0, 0.385) 3px;
        flex-direction: column;
        border-radius: 40px;
        background-color: rgba(255, 255, 0, 0.241);
        text-align: center;
    }
/* 兼容浏览器 */
    /* @-webkit-keyframes fadeinout {
        0% {
            opacity: 0;
        }

        50% {
            opacity: 0.5;
        }

        100% {
            opacity: 1;
        }


    } */
    @keyframes fadeinout {
        0% {
            /* 透明度 */
            opacity: 0;
        }

        50% {
            opacity: 0.5;
        }

        100% {
            opacity: 1;
        }


    }

    .link{
        
    margin-bottom: 0;
    /* border: solid black 1px; */
    text-align: right;
   
    }
  .more{
      text-decoration: none;
  }

  @media screen and (max-width:768px){
            /* 手机屏幕 */
   .front{
       zoom:0.8;
   }
   .rightimg{
       display: none;
   }
   .leftimg{
       display: none;
   }
   .content{
       zoom:0.8
   }
   .float-button{
     zoom:0.8;
       height: 5%;
       line-height: 250%;
    }
    }
   @media screen and (max-width:992px) and (min-width:768px){
            /* 平板 */
   
    }
</style>